<template>
  <page-model :breadHeard="breadHeard" @backLast="backLast">
    <desc-title class="mt-25" :descTitle="descTitle"> </desc-title>
    <div class="content">
      <el-form
        :model="addSensorParams"
        :rules="rules"
        ref="addSensorParams"
        label-width="300px"
      >
        <el-form-item label="场景类型名称：" prop="sceneTypeName">
          <el-input
            type="text"
            placeholder="请输入场景类型名称"
            v-model="addSensorParams.sceneTypeName"
            maxlength="10"
          ></el-input>
        </el-form-item>
        <el-form-item label="场景描述：" prop="sceneTypeDesc">
          <el-input
            type="textarea"
            placeholder="请输入部门描述"
            v-model="addSensorParams.sceneTypeDesc"
            maxlength="50"
            show-word-limit
            :rows="8"
            style="width:560px"
          ></el-input>
        </el-form-item>
        <el-form-item label="关联传感器类型：">
          <el-select
            v-model="showSensorListName"
            placeholder="请选择传感器类型"
          >
            <el-option
              v-for="item in sensorInfo"
              :key="item.deviceTypeId"
              :value="item.deviceTypeName"
              :label="item.deviceTypeName"
              @click.native="selectSensor(item)"
            >
            </el-option>
          </el-select>
          <div class="add" @click="addSensorDevice">添加</div>
          <div class="DeviceType">
            <div
              class="DeviceTypeList"
              v-for="(item, index) in DeviceTypeListName"
              :key="index"
            >
              <div class="DeviceTypeListName">{{ item.deviceTypeName }}</div>
              <i class="el-icon-close" @click="deleteDevice(item)"></i>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div class="addBtn">
        <span class="confirm flex-center" @click="determineSensor">确定</span>
      </div>
    </div>
    <!-- 确认删除场景信息的盒子 -->
    <delete-alert-box
      v-if="isDelete"
      :descTips="descTips"
      :isDelete="isDelete"
      @Cancel="Cancel"
      @Confirm="Confirm"
      :title="deleteTitle"
    ></delete-alert-box>
  </page-model>
</template>

<script>
import {
  getSensorType,
  getWriteSensor,
  deleteDeviceDetail,
  updateSceneDetail
} from '../../../api/scene'
export default {
  data () {
    return {
      descTitle: '场景信息',
      breadHeard: {
        title: '添加视频',
        firstBread: '基坑扫描 ',
        secondBread: '添加'
      },
      deleteTitle: '取消关联',
      descTips: [],
      isDelete: false,
      sensorInfo: [],
      // 双向绑定选择的传感器
      showSensorListName: '',
      showSensorListId: '',
      // 是否展示下拉框
      ifShowSelectSensor: false,
      DeviceTypeListName: [],
      addSensorParams: {
        deviceTypeIds: [],
        isValid: 0,
        sceneTypeDesc: '',
        sceneTypeName: '',
        typeHead: ''
      },
      // 是否展示取消关联盒子
      showWriteBox: false,
      showConnectInfo: true,
      deleteInfoDetail: '',
      showDetailtInfo: false,
      deteleMsg: '',
      rules: {
        sceneTypeName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          {
            min: 1,
            max: 10,
            message: '长度需小于10个字符',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  computed: {
    writeId () {
      return sessionStorage.getItem('id')
    }
  },
  methods: {
    backLast () {
      this.$router.push('/sceneManagement')
    },
    // 获取传感器列表 下拉菜单的
    async getSensor () {
      const { data: res } = await getSensorType(1, 100)
      // // console.log(res)
      this.sensorInfo = res.data.data
    },
    // 选择下拉菜单中的某一项
    selectSensor (item) {
      this.showSensorListName = item.deviceTypeName
      this.showSensorListId = item.deviceTypeId
      this.ifShowSelectSensor = false
    },
    // 添加设备的按钮
    addSensorDevice () {
      if (this.showSensorListName) {
        const result = this.DeviceTypeListName.some(item => {
          return item.deviceTypeId === this.showSensorListId
        })
        if (result !== true) {
          this.DeviceTypeListName.push({
            deviceTypeName: this.showSensorListName,
            deviceTypeId: this.showSensorListId
          })
        } else {
          this.$message({
            message: '已添加过相同传感器类型',
            type: 'error',
            duration: 1000
          })
        }

        this.showSensorListName = ''
      } else {
        this.$message({
          message: '请先选择需要添加的设备',
          type: 'error',
          duration: 1000
        })
      }
    },
    // 确定添加
    async determineSensor () {
      for (var i = 0; i < this.DeviceTypeListName.length; i++) {
        if (
          this.addSensorParams.deviceTypeIds.indexOf(
            this.DeviceTypeListName[i].deviceTypeId
          ) === -1
        ) {
          this.addSensorParams.deviceTypeIds.push(
            this.DeviceTypeListName[i].deviceTypeId
          )
        }
      }
      if (
        this.addSensorParams.sceneTypeDesc &&
        this.addSensorParams.sceneTypeName
      ) {
        const { data: res } = await updateSceneDetail(
          this.writeId,
          this.addSensorParams
        )
        // console.log(res)
        if (res.code === 200) {
          this.$message({
            message: res.message,
            type: 'success',
            duration: 500
          })
          this.$router.push('/sceneManagement')
        } else if (res.code === 901) {
          this.$message({
            message: res.message,
            type: 'error',
            duration: 500
          })
        }
      } else {
        this.$message({
          message: '请填写相关信息',
          type: 'error',
          duration: 500
        })
      }
    },
    // 删除传感器
    deleteDevice (item) {
      this.deleteInfoDetail = item
      this.descTips = [
        {
          tips: '确定取消关联“风速传感器”类传感器？',
          type: 'default'
        }
      ]
      this.isDelete = true
    },
    Cancel () {
      this.isDelete = false
    },
    Confirm () {
      deleteDeviceDetail(this.deleteInfoDetail.deviceTypeId, this.writeId).then(
        res => {
          if (res.data.code === 200) {
            const j = this.DeviceTypeListName.indexOf(this.deleteInfoDetail)
            this.DeviceTypeListName.splice(j, 1)
            this.$message({
              message: res.data.message,
              type: 'success',
              duration: 500
            })
            this.isDelete = false
          } else {
            this.$message({
              message: res.data.message,
              type: 'error',
              duration: 500
            })
            this.showDetailtInfo = true
            this.showConnectInfo = false
            this.deteleMsg = res.data.message
          }
        }
      )
    },
    // 根据id获取场景信息
    async getSceneDetail () {
      const { data: res } = await getWriteSensor(this.writeId)
      // console.log(res)
      if (res.code === 200) {
        this.addSensorParams.sceneTypeName = res.data.sceneTypeName
        this.addSensorParams.sceneTypeDesc = res.data.sceneTypeDesc
        if (res.data.tbDeviceTypes) {
          this.DeviceTypeListName = res.data.tbDeviceTypes
        }
      }
    },
    closeDeleteBox () {
      this.showWriteBox = false
      this.$store.state.ifShowCover = false
      this.showConnectInfo = true
    }
    // deleteInfoScene () {
    //   this.DeviceTypeListName.forEach(item1 => {
    //     if (item1 === this.deleteInfoDetail) {
    //       this.deleteDeviceId = this.deleteInfoDetail.deviceTypeId
    //       deleteDeviceDetail(this.deleteDeviceId, this.writeId).then(res => {
    //         if (res.data.code === 200) {
    //           const j = this.DeviceTypeListName.indexOf(item1)
    //           this.DeviceTypeListName.splice(j, 1)
    //           this.$message({
    //             message: res.data.message,
    //             type: 'success',
    //             duration: 500
    //           })
    //         } else {
    //           this.$message({
    //             message: res.data.message,
    //             type: 'error',
    //             duration: 500
    //           })
    //           this.showDetailtInfo = true
    //           this.showConnectInfo = false
    //           this.deteleMsg = res.data.message
    //         }
    //       })
    //     }
    //   })
    // }
  },
  created () {
    this.getSensor()
    this.getSceneDetail()
  }
}
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  background-color: #fff;
  min-height: calc(100% - 201px);
  margin-bottom: 30px;
  ::v-deep .el-form {
    .el-input {
      width: 400px;
      .el-input__inner {
        height: 48px;
        line-height: 48px;
      }
    }
    .el-input.is-disabled .el-input__inner {
      background: rgba(248, 248, 248, 1);
      border-radius: 6px;
      border: 1px solid rgba(220, 220, 220, 1);
      color: #333333;
    }
    .el-form-item {
      margin-bottom: 32px;
      .el-form-item__content {
        position: relative;
      }
    }
    .el-form-item__label {
      width: 300px !important;
      text-align: right;
    }
    .el-form-item__error {
      left: 300px;
      line-height: 24px;
    }
    .el-form-item.is-required:not(.is-no-asterisk)
      > .el-form-item__label:before {
      content: "*";
      color: #4868ff;
      margin-right: 4px;
    }
  }
  ::v-deep .el-upload--picture-card {
    width: 390px;
    height: 220px;
    background-color: #fff;
    .nopic {
      height: 100%;
      align-items: center;
      justify-content: center;
      position: relative;
      .addpics {
        line-height: 20px;
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(200, 200, 200, 1);
      }
    }
    .pictips {
      line-height: 20px;
      position: absolute;
      top: 0;
      left: 586px;
      height: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(255, 180, 21, 1);
      cursor: default;
    }
    .el-progress-circle {
      width: 40px !important;
      height: 40px !important;
    }
  }
}
.addBtn {
  padding: 150px 0 30px 300px;
  .confirm {
    width: 172px;
    height: 48px;
    background: rgba(72, 104, 255, 1);
    border-radius: 24px;
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(255, 255, 255, 1);
    cursor: pointer;
  }
}
.add {
  position: absolute;
  top: 6px;
  left: 716px;
  cursor: pointer;
  width: 84px;
  height: 36px;
  background: rgba(72, 104, 255, 1);
  border-radius: 18px;
  line-height: 36px;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
}
.DeviceType {
  margin: 20px 0 0 300px;
  width: 560px;
  height: 240px;
  border-radius: 5px;
  border: 1px solid rgba(230, 230, 230, 1);
  .DeviceTypeList {
    float: left;
    height: 36px;
    border: 1px solid rgba(242, 242, 242, 1);
    margin-left: 12px;
    margin-top: 12px;
    .DeviceTypeListName {
      font-size: 14px;
      float: left;
      line-height: 36px;
      padding-left: 10px;
    }
    .el-icon-close {
      cursor: pointer;
      padding-left: 24px;
      float: left;
      font-size: 15px;
      line-height: 36px;
      padding-right: 12px;
    }
  }
  .DeviceTypeList:hover {
    border-color: #ff2b2b !important;
    .el-icon-close {
      color: #ff2b2b !important;
    }
  }
}
.determain {
  cursor: pointer;
  position: absolute;
  top: 794px;
  left: 300px;
  width: 172px;
  height: 48px;
  background: rgba(72, 104, 255, 1);
  border-radius: 24px;
  font-size: 18px;
  color: rgba(255, 255, 255, 1);
  text-align: center;
  line-height: 48px;
}
.select {
  overflow-y: auto;
  position: absolute;
  z-index: 99;
  top: 536px;
  left: 320px;
  width: 300px;
  height: 248px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 4px 20px 0px rgba(11, 34, 89, 0.13);
  border-radius: 5px;
  &::-webkit-scrollbar {
    width: 4px;
    height: 120px;
    // scrollbar-arrow-color: red;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: rgba(220, 220, 220, 1);
    // scrollbar-arrow-color: red;
  }
  &::-webkit-scrollbar-track {
    border-radius: 0;
    background: #fff;
  }
  .action {
    cursor: pointer;
    width: 292px;
    height: 40px;
    line-height: 40px;
    padding-left: 12px;
  }
  .action:hover {
    background-color: #5783ff;
    color: #fff;
  }
}
.deleteMain {
  z-index: 999;
  position: fixed;
  left: 630px;
  top: 100px;
  width: 560px;
  height: 360px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  .title {
    position: relative;
    height: 72px;
    border-bottom: 1px solid rgba(242, 242, 242, 1);
    p {
      position: absolute;
      font-size: 18px;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
      line-height: 72px;
      padding-left: 20px;
    }
    .el-icon-close {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 23px;
      cursor: pointer;
      line-height: 72px;
      font-size: 18px;
    }
  }
  .mainFocus {
    position: relative;
    height: 176px;
    width: 100%;
    .determine {
      position: absolute;
      top: 59px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 18px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
    .after {
      position: absolute;
      top: 104px;
      left: 123px;
      font-size: 14px;
    }
    .deleteInfo {
      position: absolute;
      top: 60px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 18px;
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
    }
  }
  .btn {
    height: 112px;
    width: 100%;
    position: relative;
    .cancel {
      cursor: pointer;
      position: absolute;
      bottom: 60px;
      left: 132px;
      width: 128px;
      height: 48px;
      border-radius: 28px;
      font-size: 18px;
      color: rgba(72, 104, 255, 1);
      border: 2px solid rgba(72, 104, 255, 1);
      line-height: 48px;
      text-align: center;
    }
    .deterMine {
      cursor: pointer;
      position: absolute;
      bottom: 60px;
      right: 148px;
      width: 128px;
      height: 48px;
      font-size: 18px;
      background: rgba(72, 104, 255, 1);
      border-radius: 28px;
      line-height: 48px;
      text-align: center;
      color: rgba(255, 255, 255, 1);
    }
    .deterMineClose {
      cursor: pointer;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 60px;
      width: 128px;
      height: 48px;
      font-size: 18px;
      background: rgba(72, 104, 255, 1);
      border-radius: 28px;
      line-height: 48px;
      text-align: center;
      color: rgba(255, 255, 255, 1);
    }
  }
}
</style>
